import React, { Component } from 'react'
import '../assert/css/reg.css'
import Header from '../components/DefaultHeader'

export default class Reg extends Component {
    state={
        phone: "",
        nickname: "",
        password: ""
    }
    reg(){
        const {phone,nickname,password} = this.state
        //校验数据
        if(phone===""){
            return alert("手机号不可以为空")
        }
        if(nickname===""){
            return alert("昵称不可以为空")
        }
        if(password===""){
            return alert("密码不可以为空")
        }
        //提交数据
        this.$axios.post("/register",{phone,nickname,password}).then(
            res=>{
                console.log(res)
                //清空表单
                this.setState({phone:"",nickname:"",password:""})
                //通知注册成功
                alert("注册成功了")
                //跳转到登录
                this.props.history.push("/login")
            }
        )
    }
    render() {
        const {phone,nickname,password} = this.state
        return (
            <div className="reg-container">
                <Header title="会员注册" right_text="登录" right_method={()=>this.props.history.push("/login")}/>
                <div className="logo"></div>
                <div className="form">
                    <div className="form-group">
                        <input value={phone} onChange={(e)=>this.setState({phone:e.target.value.trim()})} type="text" placeholder="手机号" />
                    </div>
                    <div className="form-group">
                        <input value={nickname} onChange={(e)=>this.setState({nickname:e.target.value})} type="text" placeholder="昵称" />
                    </div>
                    <div className="form-group">
                        <input value={password} onChange={(e)=>this.setState({password:e.target.value})} type="password" placeholder="密码" />
                    </div>
                    <div className="form-group">
                        <button className="btn-gray" onClick={()=>this.reg()}>注册</button>
                    </div>
                </div>
            </div>
        )
    }
}
